<template>
	<div class="main-content">
		<ToolBar>
			<el-button style="float:left;" type="primary" icon="el-icon-plus" size="small" @click="editData(false)">添加</el-button>
			<div style="float: right">
				<el-input placeholder="请输入角色名称！" size="small" style="width: 200px" v-model="params.name" @clear="search"
				 clearable>
				</el-input>
				<el-button @click="search" type="success" icon="el-icon-search" size="small"></el-button>
			</div>
		</ToolBar>

		<el-table :data="dataList" border highlight-current-row ref="table" height="calc(100% - 90px)">
			<el-table-column fixed="left" type="index" label="序号" width="50" align="center">
			</el-table-column>
			<el-table-column prop="name" label="角色名称" align="center">
			</el-table-column>
			<el-table-column prop="displaySequence" label="显示顺序" align="center">
			</el-table-column>
			<el-table-column prop="remarks" label="描述" width="200" :show-overflow-tooltip="true" align="center">
			</el-table-column>
			
			<el-table-column prop="enable" width="100" label="是否启用" align="center">
				<template slot-scope="scope">
					<el-switch size="small" @change="enableSwitch(scope.row)" v-model="scope.row.enable" active-color="#13ce66"
					 inactive-color="#ff0000">
					</el-switch>
				</template>
			</el-table-column>
			
			<el-table-column fixed="right"  label="操作" width="120" align="center">
				<template slot="header" slot-scope="scope">
					<HelpHint content="编辑角色 / 删除或恢复角色" >操作</HelpHint>
				</template>
				<template slot-scope="scope">
					<el-tooltip class="item" v-if="scope.row.delete == false && scope.row.editable == true" effect="dark" content="编辑角色" placement="top-end">
						<el-button @click="editData(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
					</el-tooltip>
					<el-tooltip class="item" v-else  effect="dark" content="角色详情" placement="top-end">
						<el-button @click="showData(scope.row)" type="info" icon="el-icon-info" size="small" circle></el-button>
					</el-tooltip>
					<el-tooltip class="item" effect="dark" content="删除角色" placement="top-end">
						<el-button :disabled="scope.row.editable == false" @click="deleteData(scope.row.id)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="pageNum"
		 :page-sizes="[5, 10, 20, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog v-dialogDrag :title="titile" height="400px" width="800px" :close-on-click-modal="false" :close-on-press-escape="false"
		 :visible.sync="dialogFormVisible" size="mini">			
			<el-tabs v-model="activeName" >
				<el-tab-pane label="基本信息" name="userInfo" >
					<el-form :model="currentData" style="height:300px;">
						<el-row>
							<el-col :span="12">
								<el-form-item label="角色名称" :label-width="formLabelWidth">
									<el-input :readonly="dialogFormReadOnly"  v-model="currentData.name" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="显示顺序" :label-width="formLabelWidth">
									<el-input :readonly="dialogFormReadOnly"  v-model="currentData.displaySequence" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					
						<el-row>
							<el-col :span="12">
								<el-form-item size="small" label="是否启用:" :label-width="formLabelWidth">
									<el-switch :readonly="dialogFormReadOnly" style="float: left;height: 32px;" v-model="currentData.enable"
									 active-color="#13ce66" inactive-color="#ff0000">
									</el-switch>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="图标" :label-width="formLabelWidth">
									<el-input :readonly="dialogFormReadOnly"  v-model="currentData.icon" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					
						<el-row>
							<el-col :span="24">
								<el-form-item size="small" label="描述:" :label-width="formLabelWidth">
									<el-input :readonly="dialogFormReadOnly"  type="textarea" :rows="2" v-model="currentData.remarks" autocomplete="off"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					
				</el-tab-pane>
				<el-tab-pane label="功能授权" name="password">
					<div style="margin-left: 20px;height: 300px;overflow-y:auto;">
						<el-tree 
						  :data="menuDataList"
						  show-checkbox
						  node-key="id"
						  :props="defaultProps">
						</el-tree>
					</div>
				</el-tab-pane>
			</el-tabs>
			
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveData">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>


<script>
	import ToolBar from '@/components/ToolBar.vue';
	import HelpHint from '@/components/HelpHint.vue';
	import axios from 'axios';
	import {
		setPageSize,
		getPageSize
	} from '../../../utils/dataStorage'
	import {
		save,
		deleteById,
		enableSave,
		findById,
		list
	} from '../../../api/role';
	
	import {
		menuList
	} from '../../../api/menu';

	export default {
		data() {
			return {
				baseTitle:"角色",
				titile: "角色",
				activeName: 'userInfo',
				params: {
					name: '',
				},
				pageSize: getPageSize() || 10,
				pageNum: 1,
				total: 0,
				dataList: [],
				menuDataList:[],
				currentData: {},
				dialogFormVisible: false,
				dialogFormReadOnly: false,
				formLabelWidth: '120px',
				 defaultProps: {
				  children: 'children',
				  label: 'functionName'
				}
			}
		},
		created: function() {

		},
		mounted: function() {
			this.loadList();
			this.loadMenueList();
		},
		methods: {
			loadMenueList: function() {
				menuList({
					functionName: ''
				}).then(data => {
					this.menuDataList = data;				
				}).catch(exception => {				
				});
			},
			loadList: function() {
				list({
					name: this.params.name,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(data => {
					this.dataList = data.content;
					this.total = data.totalElements;
				}).catch(exception => {

				});
			},
			handleSizeChange: function(size) {
				setPageSize(size);
				this.pageSize = size;
				this.loadList();
			},
			handleCurrentChange: function(currentPage) {
				this.pageNum = currentPage;
				this.loadList();
			},
			search() {
				this.loadList();
			},
			enableSwitch(data) {
				this.currentData = JSON.parse(JSON.stringify(data));
				enableSave(this.currentData).then(res => {
					this.dataList.forEach((record, index) => {
						if (record.id == res.id) {
							this.dataList.splice(index, 1, res);
							this.currentData = res;
							this.$message({
								message: '保存成功!',
								type: 'success'
							});
						}
					});
				}).catch(exception => {});
			},
			editData(data) {
				this.dialogFormReadOnly = false;
				if (data != false) {
					this.currentData = JSON.parse(JSON.stringify(data));
					this.titile = this.baseTitle +'【' + this.currentData['name'] + '】';
				} else {
					this.currentData = {};
				}
				this.dialogFormVisible = true;
			},
			showData(data) {
				this.dialogFormReadOnly = true;
				if (data != false) {
					this.currentData = JSON.parse(JSON.stringify(data));
					this.titile = this.baseTitle +'【' + this.currentData['name'] + '】';
				} else {
					this.currentData = {};
				}
				this.dialogFormVisible = true;
			},
			saveData() {
				this.dialogFormVisible = false;
				save(this.currentData).then(res => {
					var isEdit = false;
					this.dataList.forEach((record, index) => {
						if (record.id == res.id) {
							isEdit = true;
							this.dataList.splice(index, 1, res);
							this.currentData = res;
						}
					});
					this.$message({
						message: '保存成功!',
						type: 'success'
					});
					if (isEdit == false) {
						this.loadList();
					}
					this.dialogFormVisible = false;
				}).catch(exception => {

				});
			},
			deleteData(id) {
				deleteById(id).then(res => {
					this.$message({
						message: '删除成功!',
						type: 'success'
					});
					this.loadList();
				}).catch(exception => {

				});
			}
		},
		components: {
			ToolBar,
			HelpHint
		}
	}
</script>
<style lang="scss">

</style>
